<script lang="ts" setup>
import { onPageScroll, onReady } from '@dcloudio/uni-app'
import { useScrollUpdownBottomContent } from '@/hooks'
import { useSubPage } from './composables'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import { getDialogueTopicList } from '@/services/api'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { useUserStore } from '@/stores'
const {
  navBarInfo,
  userInfo,
  loginHandle,
  navUserInfoPage,
  navCommonProblemPage,
  navMemberRightsPage,
  navOrderListPage,
  navbarInitFinishHandle,
} = useSubPage()
const { style: authInfoScrollStyle, scrollHandle: authInfoScrollHandle } =
  useScrollUpdownBottomContent('up', 80)
const specialList = ref()
const totalNum = ref()
const colorList = [
  {
    bgColor: '#d5f1e5',
    color: '#BE6811',
  },
  {
    bgColor: '#fee8ad',
    color: '#8A7ED7',
  },
  {
    bgColor: '#b7a4ff',
    color: '#50B5FF',
  },
  {
    bgColor: '#FFACA4',
    color: '#DA977F',
  },
]
onReady(() => {})
onLoad(() => {
  getData()
})
const getRandomElement = (arr) => {
  console.log(arr)
  return arr[Math.floor(Math.random() * arr.length)]
}
const getData = () => {
  let obj = {
    grade: uni.getStorageSync('gradeData').type,
  }
  getDialogueTopicList(obj).then((res) => {
    const { code, data } = res
    if (code === 0) {
      data.map((item, index) => {
        let randomObj = getRandomElement(colorList)
        item.color = randomObj.color
        item.bgColor = randomObj.bgColor
        // colorList.map((citem, cindex) => {
        //   if (index == cindex) {
        //     item.color = citem.color
        //     item.bgColor = citem.bgColor
        //   }
        // })
      })
      specialList.value = data
      totalNum.value = specialList.value.length
    }
  })
}
onPageScroll((e) => {})
const userStore = useUserStore()
const toActivePage = async (item) => {
  if (userStore.getIfBindSn) {
    tnNavPage(
      `/home-page/sceneTeaching/dialogIntroduce/index?id=${item.id}&name=${item.topicChinese}`
    )
  } else {
    uni.showModal({
      title: '设备未激活',
      content: '学习英语需要长期坚持哦，超多权益等你来解锁',
      confirmText: '立即激活',
      cancelText: '放弃福利',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
          userStore.toScanMate()
        } else if (res.cancel) {
          console.log('用户点击取消')
          tnNavPage('/pages/index/index', 'switchTab')
        }
      },
    })
  }
}

//调起微信小程序扫码
// const toScanMate = () => {
//   uni.scanCode({
//     onlyFromCamera: true, // 默认false，true为只允许从相机扫码
//     success: async (res) => {
//       console.info(res) //打印出来，查看自己想要的返回结果数据
//       // 拿SN码去绑定设备
//       await userStore.toBindUserSn(res.result)
//     },
//   })
// }
</script>

<template>
  <TnNavbar
    fixed
    bg-color="#f1f5fb"
    :bottom-shadow="false"
    :placeholder="false"
    title="续费"
    @init-finish="navbarInitFinishHandle"
  >
    <view class="tn-color-black" style="font-size: 34rpx">口语私教</view>
  </TnNavbar>
  <!-- 顶部背景 -->
  <view class="top-bg" />
  <!-- 页面内容 -->
  <view class="page" :style="{ paddingTop: `${navBarInfo.height + 12}px` }">
    <view
      class="card-swiper"
      :circular="true"
      @click="tn('/pageA/navigation/navigation')"
      :autoplay="false"
      duration="500"
      interval="18000"
      @change="cardSwiper"
    >
      <view v-for="(item, index) in 1" :key="index" style="position: relative">
        <view class="swiper-item image-banner">
          <image
            src="https://cdn.nlark.com/yuque/0/2023/png/280373/1702622459812-assets/web-upload/f6850ebf-e261-4e67-9574-53c5c83def10.png"
            mode="aspectFit"
          ></image>
        </view>
        <view
          class="swiper-item2 image-banner"
          :style="'background-image:url(https://cdn.nlark.com/yuque/0/2024/png/280373/1706708394879-assets/web-upload/dd983175-8ab7-4a19-b698-cfebf4be0b85.png);background-size: cover;'"
        >
        </view>
        <!-- <view
          class="swiper-item3 image-banner"
          :style="'background-image:url(https://cdn.nlark.com/yuque/0/2024/png/280373/1706708143138-assets/web-upload/be40e441-03f1-42db-b0b3-cac416c859b4.png);background-size: cover;'"
        >
        </view> -->
        <view class="swiper-item-text">
          <!-- <view>
            <view class="text-sussuspension">
              <view
                class="tn-text-bold"
                style="font-size: 46rpx; color: #0e2d6d"
                >Hi,我是你的专属外教</view
              >
              <view
                class="tn-padding-top-xs"
                style="font-size: 26rpx; color: #0e2d6d; width: 80%"
              >
                Hi,我是你的专属外教老师LiLi,和我一起练习口语吧</view
              >
            </view>
            <view class="text-sussuspension mt-8">
              <view
                class="tn-text-bold"
                style="font-size: 46rpx; color: #0e2d6d"
                >情景自由聊</view
              >
              <view
                class="tn-padding-top-xs"
                style="font-size: 26rpx; color: #0e2d6d"
                >每天口语10分钟，进阶口语达人
              </view>
            </view>
          </view> -->
          <view class="banner-box">
            <view class="title">HI~</view>
            <view class="p1"> 我是你的口语教练 </view>
            <view class="p2"> 选择场景话题，进行对话 </view>
            <view class="btn">自定义对话场景</view>
          </view>
          <!-- <image
            class="banner-img"
            src="@/static/imgs/icons/dr_banner.png"
            mode="widthFix"
          >
          </image> -->
        </view>
        <!-- <view
          class="swiper-item-text-tips"
          style="position: absolute; right: 0; top: 64rpx"
        >
          <image
            src="https://cdn.nlark.com/yuque/0/2024/png/280373/1706708143138-assets/web-upload/be40e441-03f1-42db-b0b3-cac416c859b4.png"
          >
          </image>
        </view> -->
      </view>
    </view>
    <view class="font-size-16 mb-16 tn-text-xxl tn-text-bold tn-padding-top-lg">
      请选择口语话题 ({{ totalNum }})
    </view>

    <view
      class="tn-flex tn-flex-wrap br-16"
      style="justify-content: space-between"
    >
      <view
        class="special"
        v-for="(item, index) in specialList"
        :key="index"
        @click="toActivePage(item)"
      >
        <view
          class="tn-flex tn-flex-direction-column"
          style="
            height: 192rpx;
            color: #4473c8;
            border-radius: 28rpx 28rpx 0 0;
            box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(52, 103, 194, 0.08);
          "
          :style="{ 'background-color': item.bgColor }"
        >
        </view>
        <view
          style="
            height: 146rpx;
            background-color: #fff;
            border-radius: 0 0 28rpx 28rpx;
            padding-left: 24rpx;
            padding-top: 26rpx;
          "
        >
          <view class="tn-text-lg tn-text-bold">
            <text class="tn-text-ellipsis font-size-16" style="color: #000">{{
              item.topicChinese
            }}</text>
          </view>
          <!-- <view class="tn-text-xs tn-padding-top-xs">
            <text class="font-color-c999 font-size-12" style="line-height: 1">{{
              item.topicEnglish
            }}</text>
          </view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import './styles/index.scss';
</style>
